<script setup>
import {ref} from 'vue'
import { showSuccessToast, showFailToast } from 'vant';
import { useRouter } from 'vue-router';

const router = useRouter()

const username = ref('')
const password = ref('')


function getUsd(){
    if(username.value === '' || password.value === ''){
        return showFailToast('账号或金额不能为空')
    }else{
        router.push('/my')
        showSuccessToast('充值成功')
    }
    
}



</script>


<template>
    <div>
        <van-nav-bar
            title="余额"
            left-text="返回"
            left-arrow
            @click-left="$router.back()"
            />


            <!-- 顶部图片 -->
            <van-grid :border="false" :column-num="1" >
                <van-grid-item>
                    <van-image
                    src="https://img.tukuppt.com/png_preview/00/08/94/tOLI9w2C9u.jpg!/fw/780"
                    />
                </van-grid-item>
            </van-grid>

        
            <!-- 输入框 -->
        <van-form >
        <van-cell-group inset>
            <van-field
            v-model="username"
            name="账号"
            label="账号"
            placeholder="账号"
            :rules="[{ required: true, message: '请输入账号或者用户名' }]"
            />
            <van-field
            v-model="password"
            name="金额"
            label="金额"
            placeholder="金额"
            :rules="[{ required: true, message: '请输入金额' }]"
            />
            
        </van-cell-group>
        <div style="margin: 16px;">
            <van-button
                @click="getUsd" 
                round 
                block 
                type="primary" 
            >
                确认
            </van-button>
        </div>
        </van-form>

    </div>
</template>